<? 
	$listContainerId = $this->formGetElementId('form_attachments_container_'.get_class($form_model).'_'.$dbName); 
	$listId = $this->formGetElementId('form_image_list_'.get_class($form_model).'_'.$dbName); 
	
	$field_definition = $form_model->find_form_field($dbName);
	$baseUrl = root_url('/uploaded/public/');
?>
<? if ($form_file_list->count): ?>
	<ul class="imageList" id="<?= $listId ?>">
		<? foreach ($form_file_list as $file): ?>
			<li>
				<div class="shadow_container">
					<div class="shadow_1">
						<div class="shadow_2">
							<div class="shadow_3">
								<div class="shadow_inner">
									<a href="<?= $baseUrl.urlencode($file->disk_name) ?>" target="_blank"><img src="<?= $file->getThumbnailPath(100, 100) ?>" alt="<?= h($file->name) ?>"/></a>
									<a href="#" onclick="return $(this).getForm().sendPhpr('<?= $this->getEventHandler('onDeleteFile') ?>', {extraFields: {dbName: '<?= $dbName ?>', fileId: '<?= $file->id ?>'}, confirm: 'Do you really want to delete this file?', update: '<?= $listContainerId ?>', loadIndicator: {show: false}});" class="delete_image hidden">Delete</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</li>
		<? endforeach ?>
	</ul>
	
	<script type="text/javascript">
		$('<?=$listId?>').getElements('li div.shadow_inner').each(function(element)
		{
			element.addEvent('mouseenter', function(){ element.getElement('a.delete_image').removeClass('hidden') });
		});
		
		$('<?=$listId?>').getElements('li div.shadow_inner').each(function(element)
		{
			element.addEvent('mouseleave', function(){ element.getElement('a.delete_image').addClass('hidden') });
		});

	</script>
	<div class="clear"></div>
<? else: ?>
	<p><?= h($field_definition->noAttachmentsLabel) ?></p>
<? endif ?>